import React, { useState, memo, useCallback } from "react";
// memo是一个高阶组件
// 效果和类组件的PureComponent一模一样

// useCallback作用是缓存函数
// 可以接受两个参数，第一个参数就是要缓存的函数，第二个是依赖数组
// 返回值是函数名称

// 如果一个函数要作为子组件的自定义事件的时候，那么就需要去加useCallback
// 普通的事件处理函数没必要加

const Child = memo(() => {
  console.log("child render");
  return <div>child子组件</div>;
});

const App = () => {
  const [count, setCount] = useState(1);
  const fn = () => {
    setCount((v) => v + 1);
  };

  const fn2 = useCallback(() => {
    console.log(123);
  }, []);

  return (
    <>
      <h2>useCallback - {count}</h2>
      <button onClick={fn}>btn</button>
      <Child onOk={fn2} />
    </>
  );
};

export default App;

// import React, { Component, PureComponent } from "react";

// class Child extends PureComponent {
//   state = {};
//   render() {
//     console.log("child render");
//     return <div>child子组件 - {this.props.count}</div>;
//   }
// }

// class App extends Component {
//   state = {
//     count: 1,
//   };

//   fn = () => {
//     this.setState((prevState) => {
//       return {
//         count: 1,
//       };
//     });
//   };

//   fn2 = () => {
//     console.log(123);
//   };

//   render() {
//     return (
//       <>
//         <h2>useCallback</h2>
//         <button onClick={this.fn}>btn</button>
//         <Child count={this.state.count} onOk={this.fn2} />
//       </>
//     );
//   }
// }

// export default App;
